<template>
    <Row :gutter="30">
        <Card style="margin:0 0 20px 0px">
            <Row class="form-row">
                <Form label-position="right" :label-width="90" inline>
                    <FormItem label="快递公司名称" prop="name">
                        <div class="filters-input">
                            <Input type="text" placeholder="快递公司名称" v-model="name" clearable/>
                        </div>
                    </FormItem>
                    <FormItem label="快递公司电话" prop="name">
                        <div class="filters-input">
                            <Input type="text" placeholder="快递公司电话" v-model="phone" clearable/>
                        </div>
                    </FormItem>
                    <FormItem>
                        <Button type="primary" size="large" icon="md-search" @click="loadData()">
                            查询
                        </Button>
                    </FormItem>
                </Form>
            </Row>

            <Row style="margin:0 0 20px 0 ">
                <Button type="primary" icon="md-add" size="large" @click="handleAdd()">
                    新增
                </Button>
            </Row>

            <el-table :data="tableData" border stripe style="width: 100%">
                <template slot="empty">暂无数据</template>
                <el-table-column prop="name" label="名称"></el-table-column>
                <el-table-column prop="phone" label="电话"></el-table-column>
                <el-table-column label="操作" align="center" width="150px">
                    <template slot-scope="scope">
                        <el-button size="mini" type="warning" @click="handleAdd(scope.row.id)">修改</el-button>
                        <el-button size="mini" type="primary" @click="handleDelete(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </Card>
        <Modal v-model="formVisible" :title="modal && modal.id ? '修改' : '新增'" class="modal-content" width="60%">

            <Form :model="modal" :rules="rule" ref="form2" label-position="right" class="myOpenFrom" :label-width="110">
                <FormItem label="快递公司名称" prop="name">
                    <Input v-model="modal.name" placeholder="快递公司名称" size="large"></Input>
                </FormItem>
                <FormItem label="电话" prop="phone">
                    <Input v-model="modal.phone" placeholder="电话" size="large"></Input>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="text" size="large" @click="onCancel">取消</Button>
                <Button type="primary" size="large" @click="handleSubmit" :loading="formLoading">确定</Button>
            </div>
        </Modal>
    </Row>

</template>
<script>
    //校验规则
    const rules = {
        name: [
            {
                required: true,
                message: "请输入公司名称",
                trigger: "blur"
            }
        ],
        phone: [
            {
                required: true,
                message: "请输入公司电话",
                trigger: "blur"
            }
        ]
    };

    let companyId = 0;
    export default {
        data() {
            //收件表格
            return {
                modal: {},

                //验证规则
                rule: rules,
                //数据表格隐藏那个状态
                tableLoading: false,
                //对话框隐藏状态
                formVisible: false,
                //表单提交状态
                formLoading: false,
                optionsCompany: [],
                name: "",
                phone: "",

                tableData: [],
                tableModal: [],
                columns: [
                    {
                        title: "名称",
                        key: "name"
                    },
                    {
                        title: "电话",
                        key: "phone"
                    },
                    {
                        key: "action",
                        title: "操作",
                        width: 150,
                        align: "center",
                        render: (h, params) => {
                            return h(
                                "div",
                                this.$refs.table.$scopedSlots.action({
                                    id: params.row.id
                                })
                            );
                        }
                    }
                ]
            };
        },
        created: function () {
            this.postRequest("/api/kdCompany/queryKdCompany").then(res => {
                this.tableData = res;
            });
        },
        methods: {
            // 根据部门id获取发件数据
            handleDelete(id) {
                this.getRequest("/api/kdCompany/deleteKdCompany?id=" + id).then(res => {
                    this.tableLoading = false;
                    if (res.code == 20000) {
                        this.$Message.success("删除成功!");
                        this.loadData();
                    } else {
                        this.$Message.error({
                            content: res.message,
                            duration: 5
                        });
                    }
                });
                this.loadData();
            },
            loadData() {
                let params = {};
                params.name = this.name;
                params.phone = this.phone;
                this.postRequest("/api/kdCompany/quertByKdC", params).then(res => {
                    this.tableData = res;
                });
            },
            save() {
                this.postRequest("/api/kdCompany/saveOrUpdate", this.modal).then(res => {
                    this.tableLoading = false;
                    if (res.code == 20000) {
                        this.formLoading = false;
                        this.formVisible = false;
                        this.loadData();
                    } else {
                        this.formLoading = false;
                        this.$Message.error({
                            content: res.message,
                            duration: 5
                        });
                    }
                });
            },
            //打开页面
            handleAdd(id) {
                let url = "/api/kdCompany/openModel";
                if (id) {
                    url = "/api/kdCompany/openModel?id=" + id;
                }
                this.modal = {};
                this.getRequest(url).then(res => {
                    this.tableLoading = false;
                    if (res) {
                        this.modal = res;
                    }
                    this.formVisible = true;
                });
            },
            handleSubmit() {
                this.$refs["form2"].validate(valid => {
                    if (valid) {
                        this.formLoading = true;
                        this.save();
                        this.loadData();
                    }
                });
            },
            onCancel() {
                this.formLoading = false;
                this.formVisible = false;
            }
        }
    };
</script>
